<template>
  <div style="height:100%">
    <div class="tab-divl">
      <el-button @click="openDetection">确定</el-button>
      <el-table
        ref="multipleTable"
        :data="MailTableData"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
        class="tabone"
        style="width:50%"
      >
        <el-table-column
          width="50"
          type="selection"
          :selectable="selectable"
        ></el-table-column>
        <el-table-column width="50" label="状态">
          <template slot-scope="scope">
            <!-- 后面根据数据来渲染圆点背景色 -->
            <div @click="MemberInformation(scope.row)" style="width:100%; ">
              <span class="yuan" v-if="scope.row.status !== 0"></span>
              <span class="yuan , hui" v-else></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="账号类型" prop="type">
          <template slot-scope="scope">
            <div @click="MemberInformation(scope.row)" style="width:100%; ">
              <span v-if="scope.row.type == 1">调度员</span>
              <span v-else-if="scope.row.type == 2">终端用户</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="80" label="姓名">
          <template slot-scope="scope">
            <div @click="MemberInformation(scope.row)" style="width:80px; ">
              <span>{{ scope.row.fullName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="工种名称" width="80">
          <template slot-scope="scope">
            <div @click="MemberInformation(scope.row)" style="width:80px; ">
              <span
                v-if="scope.row.type == 1"
                style="width:100%; height:100%;"
              ></span>
              <span v-if="scope.row.type !== 1">{{ scope.row.workName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="100" label="所属对讲组">
          <template slot-scope="scope">
            <div @click="MemberInformation(scope.row)" style="width:100%; ">
              <span v-for="(item, index) in scope.row.tname" :key="index">{{
                item
              }}</span>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column>
                        <template slot-scope="scope">
                          <span @click="MemberInformation(scope.row)" style="cursor: pointer">...</span>
                        </template>
                      </el-table-column>-->
      </el-table>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {
  created() {},
  data() {
    return {
      // 通讯录成员表单数据
      MailTableData: [],
      terminalLocation: "",
      table_list: "",
      bpoint: "",
      multipleSelection: [],
      pointLocation: [],
      time: null,
    };
  },
  async mounted() {
      this.init()
    this.timer();
    // window.dispatchEvent(
    //     new CustomEvent('inviteFull', {
    // 						detail: {
    // 							full: 0,
    // 							id: 4,
    // 							userinfor: JSON.parse(localStorage.getItem('user')),
    // 							targetType:  'z',
    // 							type:  'd2z',
    // 							// multipleSelection: this.multipleSelection,
    // 						},
    // 					})
    // )
  },
  methods: {
    async init() {
      const { data: res } = await this.$http.post(
        "contact/findContact",
        qs.stringify(this.postmaildata)
      );
      this.MailTableData = res.data.list;
    },
    timer() {
      this.time = setInterval(() => {
          this.init()
      }, 15000);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(val)
      // console.log(val)
      // if (val.length > 0) {
      //   for(let i =0;i<=val.length;i++){
      //     if(val[i].type != 2){
      //       this.isDetective =false
      //     }else {
      //       this.isDetective =true;
      //     }
      //   }
      // };
      this.table_list = [];
      val.forEach((val, index) => {
        this.MailTableData.forEach((v, i) => {
          // id 是每一行的数据id
          if (val.id == v.id) {
            this.table_list.push(val.id);
          }
        });
      });
      // "----------------点击选择的行数据", this.table_list;
      this.pointLocation = val;
      this.bpoint = [];
      this.pointLocation.forEach((element) => {
        // 显示图标
        if (element.color == "#0C468E") {
          this.terminalLocation.url = L_0C468E;
        } else if (element.color == "#2DD787") {
          this.terminalLocation.url = L_2DD787;
        } else if (element.color == "#3FE5F2") {
          this.terminalLocation.url = L_3FE5F2;
        } else if (element.color == "#5C4DC6") {
          this.terminalLocation.url = L_5C4DC6;
        } else if (element.color == "#9B5718") {
          this.terminalLocation.url = L_9B5718;
        } else if (element.color == "#011C31") {
          this.terminalLocation.url = L_011C31;
        } else if (element.color == "#68E122") {
          this.terminalLocation.url = L_68E122;
        } else if (element.color == "#814A94") {
          this.terminalLocation.url = L_814A94;
        } else if (element.color == "#1596FF") {
          this.terminalLocation.url = L_1596FF;
        } else if (element.color == "#009721") {
          this.terminalLocation.url = L_009721;
        } else if (element.color == "#D32084") {
          this.terminalLocation.url = L_D32084;
        } else if (element.color == "#F8EA38") {
          this.terminalLocation.url = L_F8EA38;
        } else if (element.color == "#FF3E59") {
          this.terminalLocation.url = L_FF3E59;
        } else if (element.color == "#FFB142") {
          this.terminalLocation.url = L_FFB142;
        }
        // 判断是否在线
        // if (element.status == 0) {
        //   this.terminalLocation.url = L_C3C3C3;
        // }
        if (element.type == 1) {
          if (element.status == 0) {
            this.terminalLocation.url = L_29710;
          } else {
            this.terminalLocation.url = L_29711;
          }
        }
        element.center = {
          lat: element.latitude,
          lng: element.longitude,
        };
        element.url = this.terminalLocation.url;
        // this.bpoint.push(element.center);
      });
      this.djh();
      // mapAddoverlay
      // if (this.pointLocation.length == 1) {
      //   this.center = this.pointLocation[0].center;
      //   this.zoom = 20;
      //   // this.center = this.pointLocation[0].center;
      // } else if (this.pointLocation.length != 0) {
      //   this.center = {
      //     lat: this.center + 0.000001,
      //     lng: this.center + 0.000001
      //   };
      //   this.zoom = 12;
      // }

      if (this.lastPl !== this.pointLocation) {
        window.dispatchEvent(new CustomEvent("mapAddoverlay", {}));
        this.lastPl = JSON.parse(JSON.stringify(this.pointLocation));
      }
    },
    openDetection() {
      let isActive = this.multipleSelection;
      if (isActive.length) {
        if (isActive.length <= 4) {
          let len = isActive.filter((item) => item.type == 2);
          let status = isActive.filter((item) => item.status != 0);
          if (
            len.length == isActive.length &&
            status.length == isActive.length
          ) {
            this.MemberDialogVisible = false;
            this.inviteVideoOnoToOne(5);
          } else if (len.length < isActive.length) {
            this.$message.error("请选择终端用户");
          } else if (status.length < isActive.length) {
            this.$message.error("对方不在线");
          }
        } else {
          this.$message.error("选择的终端用户不能超过4个，请重新选择");
        }
      } else {
        this.$message.error("请选择终端用户");
      }
    },
    inviteVideoOnoToOne() {
      if (this.multipleSelection.length > 0) {
        localStorage.setItem("fullScreen", "true");
        window.dispatchEvent(
          new CustomEvent("inviteFull", {
            detail: {
              full: 0,
              id: 4,
              userinfor: JSON.parse(localStorage.getItem("user")),
              targetType: this.multipleSelection[0].type == "1" ? "d" : "z",
              type: this.multipleSelection[0].type == "1" ? "d2d" : "d2z",
              multipleSelection: this.multipleSelection,
            },
          })
        );
      } else {
        this.$message.error("请选择邀请成员！");
      }
    },
  },
};
</script>
<style scoped>
.box {
  width: 100%;
  height: 100%;
}
</style>
